<script>
import axios from 'axios';
import * as echarts from 'echarts';




    export default{
        data(){
            return{
                charts:[{
                        chart:null,
                        id:'pie',
                        path:'region',
                    },{
                        chart:null,
                        id:'line',
                        path:'history',
                    },{
                        chart:null,
                        id:'huxing',
                        path:'huxing',
                    }
                ],
                url:"http://39.106.84.74:8060/",
            }
        },
        methods:{
            getChart(url,params,chart){
                axios.get(url,{params:params})
                .then( (response) => {
                    chart.setOption(response.data)
                })
            },
            flushCharts(){
                var city = this.$route.params.city
                this.charts.forEach(each => {
                    this.getChart(this.url+each.path,{"city":city},each.chart)
                })
            }
        },
        mounted(){
            this.charts.forEach(each => {
                if (echarts.getInstanceByDom(document.getElementById(each.id)) == undefined){
                    each.chart = echarts.init(document.getElementById(each.id));
                }
            })
            this.flushCharts()
            
        },
        created() {
            this.$watch(() => this.$route.params.city,(newCity, oldCity) => {
                // 对路由变化做出响应...
                this.flushCharts()
                console.log("watch")
            })
        },
        
    }
</script>

<template>
    <h1>{{ this.$route.params.city }}</h1>
    <keep-alive>
        <div class="charts">
            <div v-for="(chart) in this.charts" :id="chart.id"></div>
        </div>
    </keep-alive>
    
</template>

<style>
    .charts {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
    #pie{
        width: 45%;
        height: 100%;
    }
    #huxing{
        width: 45%;
        height: 100%;
    }
    #line{
        width: 50%;
        height: 100%;
    }
</style>